<template>
    <section>
        <div class="pull-right">
            <button click.delegate="delete()">Delete</button>
        </div>

        <div class="row">
            <h4>Basic Information</h4>
            <div class="col-xs-4">Name</div>
            <div class="col-xs-8">${name}</div>
        </div>
        <div class="row">
            <div class="col-xs-4">Type</div>
            <div class="col-xs-8">${details.calendarType}</div>
        </div>
        <div class="row">
            <div class="col-xs-4">Description</div>
            <div class="col-xs-8">${details.description}</div>
        </div>
        <div class="row">
            <div class="col-xs-4">Base Calendar</div>
            <div class="col-xs-8">${details.calendarBase}</div>
        </div>

        <div if.bind="isCronCalendar()">
            <div class="row">
                <div class="col-xs-4">Cron Expression</div>
                <div class="col-xs-8">${details.cronExpression}</div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">Time Zone</div>
            <div class="col-xs-8">${details.timeZone.displayName}</div>
        </div>

    </section>
</template>